<template>
  <div id="FindCar" class="modelBox">
    <h2 class="title">
      <a href>
        <img src="../../../static/m_img/h_ks.png" alt>
        <span>快速找车</span>
      </a>
    </h2>
    <div class="find">
      <ul class="priceList">
        <li @click="priceToCarList('/BuyCar',0,50000)">5万元以下</li>
        <li @click="priceToCarList('/BuyCar',50000,100000)">5-10万元</li>
        <li @click="priceToCarList('/BuyCar',100000,200000)">10-20万元</li>
        <li @click="priceToCarList('/BuyCar',200000,200000000)">20万元以上</li>
      </ul>
      <ul class="timeList">
        <li @click="timeToCarList('/BuyCar',new Date(),new Date()+365)">1年以内</li>
        <li @click="timeToCarList('/BuyCar',new Date()+365*2,new Date()+365*5)">2-5年</li>
        <li @click="timeToCarList('/BuyCar',new Date()+365*5,new Date()+365*8)">5-8年</li>
        <li @click="timeToCarList('/BuyCar',new Date()+365*8,new Date()+365*100)">8年以上</li>
      </ul>
      <ul class="brandList clearfix">
        <li
          v-for="(item,index) in brandList"
          :key="index"
          @click="brandToCarList('/BuyCar',item.brandName)"
        >
          <img :src="item.logoUrl" alt>
          <span>{{item.brandName}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {} from "element-ui";
import { getReq } from "../../assets/js/api";
export default {
  data() {
    return {
      brandList: []
    };
  },
  components: {},
  methods: {
    getBrands() {
      getReq("/app/config/getAllCarBrands").then(res => {
        let { errcode, message, content } = res;
        if (errcode == 0) {
          this.brandList = content.hotCarBrands;
        }
      });
    },
    priceToCarList(name, downPrice, upPrice) {
      this.$router.push({
        path: name,
        query: {
          downPrice: downPrice,
          upPrice: upPrice
        }
      });
     
    },
     timeToCarList(name, startTime, endTime) {
      this.$router.push({
        path: name,
        query: {
          startTime: startTime,
          endTime: endTime
        }
      });
     
    },
    brandToCarList(name, brandName) {
      this.$router.push({
        path: name,
        query: {
         brandName:brandName
        }
      });
    }
  },
  mounted() {
    this.getBrands();
  }
};
</script>
<style scoped lang='scss'>
#FindCar {
  .find {
    padding-top: 15px;
  }
  ul {
    color: #323232;
    font-size: 1.25rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: center;
  }

  .brandList {
    display: block;
  }

  .brandList li {
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: 7.5px;
    span {
      display: block;
    }
    img {
      width: 27px;
      height: 27px;
    }
  }
}
</style>
